<template>
	<el-dialog title="选择人员" :visible.sync="visible" append-to-body width="992px" top="0" custom-class="sw_select_user">
		<div class="query_user_wrapper" v-loading="tableLoading">
			<el-form size="mini" inline>
				<el-form-item><el-input v-model="queryData.account" clearable placeholder="用户账号" style="width: 180px"></el-input></el-form-item>
				<el-form-item><el-input v-model="queryData.userName" clearable placeholder="用户姓名" style="width: 180px"></el-input></el-form-item>
				<el-form-item>
					<sw-search-tree-select v-model="queryData.deptId" :tree-data="departTree" :default-props="defaultProps" />
				</el-form-item>
				<el-form-item><el-button type="primary" @click="queryTableData()">查询</el-button></el-form-item>
			</el-form>
			<el-table v-bind="tableConfig" :data="tableData" @row-click="handleRowClick" @select="handleSelectTable" @select-all="handleAllSelectTable">
				<el-table-column type="selection" width="48" align="center" />
				<el-table-column prop="account" label="用户账号" min-width="150" />
				<el-table-column prop="userName" label="用户姓名" min-width="150" />
				<el-table-column prop="deptName" label="用户部门" min-width="150" show-overflow-tooltip />
			</el-table>
			<sw-pagination v-bind="pageConfig" :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()" />
		</div>
		<div class="select_user_wrapper">
			<el-scrollbar class="list">
				<div class="item" v-for="(item, index) in checkedUser" :key="index">
					<el-avatar size="small" shape="square" :src="item.picPath | picPathFilter(siteInfo)"></el-avatar>
					<h4>{{ item.userName }}</h4>
					<el-button size="medium" type="text" icon="el-icon-delete" @click="handleDeleteUser(item)"></el-button>
				</div>
			</el-scrollbar>
			<div class="button">
				<el-button size="small" @click="visible = false">取消</el-button>
				<el-button size="small" type="primary" :loading="loading" @click="handleSubmitUser">确定</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script>
import lodash from 'lodash';
import { mapGetters } from 'vuex';
import { getUserList } from '@/api/system/tbSysUser';
export default {
	props: {
		value: { type: Boolean, default: false },
		data: { type: Array, default: () => [] },
		loading: { type: Boolean, default: false }
	},
	data() {
		return {
			visible: this.value,
			tableLoading: false,
			tableConfig: { ref: 'table', rowKey: 'id', height: '100%', size: 'medium' },
			pageConfig: { pagerCount: 5, layout: 'slot, prev, pager, next' },
			defaultProps: { label: 'name', children: 'childList' },
			queryData: { page: 1, limit: 15 },
			roleListData: [],
			checkedUser: [],
			tableData: [],
			dataCount: 0
		};
	},
	computed: { ...mapGetters(['siteInfo', 'departTree']) },
	filters: {
		picPathFilter(input, data) {
			if (!!input) {
				return input;
			} else if (!!data.userPicPath) {
				return data.userPicPath;
			} else {
				return require('@/assets/img/avatar_image.png');
			}
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		async visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.queryData = { page: 1, limit: 15 };
			this.queryTableData();
		},
		data(arr) {
			this.checkedUser = [...arr];
		},
		tableData(arr) {
			let users = this.checkedUser;
			this.$refs['table'].clearSelection();
			arr.forEach((item) => {
				if (!users.some((n) => n.id === item.id)) return false;
				this.$nextTick(() => {
					this.$refs['table'].toggleRowSelection(item, true);
				});
			});
		}
	},
	methods: {
		//获取用户列表数据
		async getTableData() {
			let params = { ...this.queryData };
			let result = await getUserList(params).then((res) => res.data);
			this.tableLoading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = !result.data ? [] : result.data;
			}
		},

		//查询用户列表数据
		queryTableData() {
			this.tableLoading = true;
			this.getTableData();
		},

		//行点击事件
		handleRowClick(data, column) {
			if (column.property === 'selection') return false;
			if (this.checkedUser.some((n) => n.id === data.id)) {
				let index = this.checkedUser.findIndex((n) => n.id === data.id);
				this.$refs['table'].toggleRowSelection(data, false);
				this.checkedUser.splice(index, 1);
			} else {
				let httpUrl = data.sysAttachment?.httpUrl || '';
				let userData = { ...data, picPath: httpUrl.replaceIP() };
				this.checkedUser.push(lodash.pick(userData, ['id', 'userName', 'picPath']));
				this.$refs['table'].toggleRowSelection(data, true);
			}
		},

		//点击选中
		handleSelectTable(selection, data) {
			if (this.checkedUser.some((n) => n.id === data.id)) {
				let index = this.checkedUser.findIndex((n) => n.id === data.id);
				this.checkedUser.splice(index, 1);
			} else {
				let httpUrl = data.sysAttachment?.httpUrl || '';
				let userData = { ...data, picPath: httpUrl.replaceIP() };
				this.checkedUser.push(lodash.pick(userData, ['id', 'userName', 'picPath']));
			}
		},

		//全选用户
		handleAllSelectTable(selection) {
			if (selection.length > 0) {
				selection.forEach((item) => {
					let httpUrl = item.sysAttachment?.httpUrl || '';
					let userData = { ...item, picPath: httpUrl.replaceIP() };
					if (this.checkedUser.some((n) => n.id === item.id)) return false;
					this.checkedUser.push(lodash.pick(userData, ['id', 'userName', 'picPath']));
				});
			} else {
				this.tableData.forEach((item) => {
					let index = this.checkedUser.findIndex((n) => n.id === item.id);
					this.checkedUser.splice(index, 1);
				});
			}
		},

		//删除选中用户
		handleDeleteUser(data) {
			let index = this.checkedUser.findIndex((n) => n.id === data.id);
			this.checkedUser.splice(index, 1);
			if (this.tableData.some((n) => n.id === data.id)) {
				let info = this.tableData.find((n) => n.id === data.id);
				!!info && this.$refs['table'].toggleRowSelection(info, false);
			}
		},

		//提交选中用户
		async handleSubmitUser() {
			this.$emit('submit', this.checkedUser);
		}
	}
};
</script>
<style lang="scss">
.sw_select_user .el-dialog__body {
	height: calc(80vh - 55px);
	padding: 0;
}
</style>
<style lang="scss" scoped>
.query_user_wrapper::v-deep {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
	.el-form {
		padding: 10px;
		.el-input {
			display: flex;
		}
	}
	.el-form-item {
		margin-bottom: 0;
	}
	.el-form-item__content {
		display: flex;
		align-items: center;
	}
	.el-table {
		border-top: solid 1px #ebeef5;
	}
	.el-table__row {
		cursor: pointer;
	}
	th.el-table__cell {
		color: #303133;
		background-color: var(--primary-background-plain-disabled);
	}
	.sw-pagination {
		padding: 12px;
		margin-top: 0;
	}
}

.select_user_wrapper {
	display: flex;
	flex-direction: column;
	width: 240px;
	flex-shrink: 0;
	border-left: solid 1px #ebeef5;
	.list {
		flex: 1;
		padding: 4px 0;
		overflow: hidden;
		border-bottom: solid 1px #ebeef5;
	}
	.item {
		display: flex;
		align-items: center;
		padding: 6px 10px;
		.el-avatar {
			flex-shrink: 0;
		}
		h4 {
			flex: 1;
			font-size: 14px;
			line-height: 20px;
			font-weight: normal;
			overflow: hidden;
			margin: 0 10px;
		}
		.el-button {
			flex-shrink: 0;
			padding: 6px 0;
		}
	}
	.button {
		padding: 10px;
		text-align: right;
	}
}
</style>
